<template>
  <div class="app-container">
    <!-- 添加或修改项目基础信息管理对话框 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
      <el-form-item label="生产单号" prop="produceNo">
        <el-input v-model="queryParams.produceNo" placeholder="请输入产品编码"
                  clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="产品编码" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入产品编码"
                  clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入产品名称"
                  clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="产品型号" prop="xinghao">
        <el-input v-model="queryParams.xinghao" placeholder="请输入产品型号"
                  clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="产品描述" prop="miaoshu">
        <el-input v-model="queryParams.miaoshu" placeholder="请输入产品描述"
                  clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker v-model="dateRange"
                        style="display: flex;"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!--<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['develop:LvRukumingxi:add']">新增产品</el-button>-->
        <!--<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportDetail">导出
        </el-button>-->
      </el-form-item>
    </el-form>
    <el-popconfirm :title="`确认批量提交数据项？`" @confirm="handleToZhijian({})" style="margin-left: 10px;">
      <el-button slot="reference" type="danger" plain icon="el-icon-delete" :disabled="multiple" size="mini"
                 style="margin-left:10px;" >生产批量提交到质检
      </el-button>
    </el-popconfirm>

    <el-form ref="form" :model="form"  :rules="rules" label-width="120px">
      <el-table :data="columns" ref="dragTable" row-key="id" v-loading="loading" :max-height="tableMaxHeight" @sort-change="handleSortChange"  @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="50">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生产单号" align="center" prop="produceNo"/>
        <el-table-column label="产品编码" align="center" prop="code"/>
        <el-table-column label="产品名称" align="center" prop="name"/>
        <el-table-column label="产品型号" align="center" prop="xinghao"/>
        <el-table-column sortable label="产品类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.prod_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column sortable label="产品状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.prodsale_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <!--<el-table-column sortable label="工序状态" align="center" prop="issheding">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.task_status" :value="scope.row.issheding" />
          </template>
        </el-table-column>
        <el-table-column sortable label="拆解状态" align="center" prop="ischaijie">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pro_chaijie_gongxu" :value="scope.row.ischaijie" />
          </template>
        </el-table-column>-->
        <el-table-column label="需求日期" align="center" prop="saleDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.saleDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品描述" align="center" prop="miaoshu" show-overflow-tooltip/>
        <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
        <el-table-column align="center" label="订单产品数量" prop="count" sortable />
      <!--<el-table-column align="center" label="分配数量" prop="pleaseBuyCount" sortable />-->
        <el-table-column align="center" label="已自制数量" prop="finishdoCount" sortable />
        <el-table-column align="center" label="已入库数量" prop="rukuCount" sortable />
        <el-table-column label="可入库数量" width="210">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.kerukuCount" :precision="0" :min="0" ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="自制产品备注" width="210">
          <template slot-scope="scope">
            <el-input v-model="scope.row.doremark" placeholder="请输入自制产品备注"
                      clearable type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column label="操作工" width="210">
          <template slot-scope="scope">
            <el-input v-model="scope.row.douser" placeholder="请输入操作工"
                      clearable type="textarea"/>
          </template>
        </el-table-column>
        <!--<el-table-column label="生产完成时间" width="210">
          <template slot-scope="scope" >
            <el-date-picker clearable v-model="scope.row.productdate" type="date" value-format="yyyy-MM-dd" size="mini" style="width: 150px;"
                        placeholder="请选择生产完成时间">
        </el-date-picker>
          </template>
        </el-table-column>-->
        <!--<el-table-column label="巡检单" align="center" prop="xunjianFile" width="200" sortable>
          <template slot-scope="scope" v-if="scope.row.xunjianFile">
            <image-preview :src="scope.row.xunjianFile" height="60px" width="40px"></image-preview>
          </template>
        </el-table-column>-->
        <!--<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
          <template slot-scope="scope">
            <el-button @click="xunjian(scope.row)" icon="el-icon-view" size="mini" type="text">
              巡检单
            </el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-form>

<!--    <ruku-form @ok="getList" ref="rukuForm"></ruku-form>-->
    <xunjian-form @ok="getList" ref="xunjianForm"></xunjian-form>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />
  </div>
</template>

<script>
  import {
    addAction,
    deleteAction,
    downloadFile,
    getAction,
    getById
  } from '@/api/manage'
  import XunjianForm from "@/views/develop/projectBaseInfo/prjForGoodsIn/XunjianForm";
  import { listFinishDo,listFinishDoFactory } from "@/api/develop/goodsSaledo";
  //import RukuForm from '@/views/develop/lvRukumingxi/module/RukuForm'

  export default {
    name: "YizizhiListFactory",
    dicts: ['prodsale_status', 'pro_chaijie_gongxu', 'prod_type','task_status'],
    components: {
      XunjianForm,
     // RukuForm,
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 非多个禁用
        multiple: true,
        activeName: "first",
        // 弹出层标题剩余领料总数量
        title: "产成品待入库列表",
        // 是否显示弹出层
        open: false,
        // 显示搜索条件
        showSearch: true,
        // 表单参数
        form: {},
        proId: "",
        proStatus: "",
        columns: [],
        total: 0,
        // 表单校验
        rules: {},
        dateRange: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          params: {},
          id: null,
          produceNo: null,
          code: null,
          projectNo: null,
          gongchengName: null,
          deliveryPerson: null,
          goodsName: null,
          goodsCode: null,
          model: null,
          brand: null,
          isdo: "1",
          ischaijie: null,
          remark: null,
          projectId: null,
          orderByColumn: "create_time",
          isAsc: "desc",
        },
        url: {
          list: '/factoryProduceSaleAll/factoryProduceSaleAll/listFinishDoFactory',
          getById: '/projectBaseInfo/projectBaseInfo/',
          exportData: '/goodsSale/goodsSale/exportData',
          insertRukuToZhijianRuku: '/factoryProduceSaleAll/factoryProduceSaleAll/insertRukuToZhijianRuku',
        },
        tableMaxHeight: window.innerHeight - 320,
      };
    },
    created() {
      //this.handleQuery();
      this.getList();
      window.addEventListener('resize', this.getTableHeight);
    },
    methods: {
      handleAdd() {
        this.$refs.rukuForm.show();
      },
      handleToZhijian(){
        let that = this;
        // 校验 dataListChose 中的 productdate 是否全部非空
        /*const hasEmptyProductDate = that.dataListChose.some(item => !item.productdate);
        if (hasEmptyProductDate) {
          that.$modal.msgError("请确保所有记录的生产完成时间已填写");
          return;
        }*/
        that.$refs["form"].validate(valid => {
          if (valid) {
            const param = Object.assign({});
            param.columnsGoodsSaleFactory = that.dataListChose;
            addAction(that.url.insertRukuToZhijianRuku, param).then(response => {
              that.$modal.msgSuccess("提交成功");
              that.handleQuery();
            });
          }
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.dataListChose=selection;
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      xunjian(row) {
        this.$refs.xunjianForm.xunjianShow(row);
      },
      getList() {
        this.loading = true;
        listFinishDoFactory(this.addDateRange(this.queryParams, this.dateRange,"OrderDate")).then(response => {
          this.columns = response.rows;
          this.columns.forEach(item => {
            item.kerukuCount = Math.round(item.kerukuCount);
          });
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = []
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      reset() {
        this.form = {
          id: null,
          remark: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      handleSortChange(column) {
        const { prop, order } = column;
        this.queryParams.orderByColumn = prop;
        this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
        this.handleQuery();
      },
      handleExportDetail(row) {
        downloadFile(this.url.exportData, this.queryParams);
      },


    }
  };
</script>
